<template>
	<view class="lay-root">
		<view class="table-lay">
			<view class="table-head"> {{$t(firstTableName)}} </view>
			<view class="table-content">
				<view class="table-item flex-h" v-for="(item,index) in firstTableContent" :key="index">
					<text class="item-key">{{$t(item.key)}}</text>
					<text class="item-value">{{ (valueData && valueData[item.value]) ? valueData[item.value] : '--'}}</text>
				</view>
			</view>
			<view class="second-lay flex-v" @click="onSecondClick">
				<view v-if="secondShowType == 0" class="table-show">
					<view class="table-head"> {{$t(secondTableName)}} </view>
					<view class="table-content">
						<view class="table-item flex-h" v-for="(item,index) in hisData" :key="index">
							<text class="item-key">{{item.key}}</text>
							<text class="item-value">{{item.value}}</text>
						</view>
					</view>
				</view>

				<view v-if="secondShowType == 1" class="pie-show">
					<view class="table-head"> {{pieChartName}} </view>
					<view class="charts-box">
						<qiun-data-charts type="pie" :chartData="pieChartData" background="none" />
					</view>
				</view>

				<view v-if="secondShowType == 2" class="pie-show">
					<view class="table-head"> {{pieChartAntherName}} </view>
					<view class="charts-box">
						<qiun-data-charts
						
							type="pie" :chartData="pieChartPointData" background="none" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			pointData: {
				type: Array
			},

			infoData: {
				type: Object
			},

			valueData: {
				type: Object
			},

			hisData: {
				type: Array
			},

			planImplementationData: {
				type: Array
			}
		},

		components: {},

		watch: {
			planImplementationData(newVal) {
				this.secondShowType = 0;
				this.genPlanPieData();
			},

			pointData(newVal) {
				console.log("drawInfoView - pointData - changeed")
				this.secondShowType = 0;
				this.genPointPieData();
			}
		},

		data() {
			return {
				firstTableName: '',
				firstTableContent: [],

				secondTableName: '',
				secondTableContent: [],

				pieChartName: '',
				pieChartAntherName: '',
				pieChartData: {},
				pieChartPointData: {},

				secondShowType: 0, // 0 table 1 chart
			}
		},

		mounted() {
			this.firstTableName = this.infoData.firstTableName;
			this.firstTableContent = this.infoData.firstTableContent;

			this.secondTableName = this.infoData.secondTableName;
			this.secondTableContent = this.infoData.secondTableContent;

			this.pieChartName = this.infoData.pieChartName;
			this.pieChartAntherName = this.infoData.pieChartAntherName;
			// this.pieChartData = this.infoData.pieChartData;
		},

		methods: {
			onSecondClick() {
				this.secondShowType++;
				if (this.secondShowType > 2)
					this.secondShowType = 0;
			},

			genPointPieData() {
				console.log("genPointPieData")
				console.log(this.pointData)
				let _self = this;
				let tempCounts = [0, 0, 0]; // 【1 2 3】
				this.pointData.forEach(e => {
					let tempState = e.plan_cls_type;
					if (tempState == 1)
						tempCounts[0]++;
					else if (tempState == 2)
						tempCounts[1]++;
					else if (tempState == 3)
						tempCounts[2]++;
				})

				this.pieChartPointData.series = [];
				this.pieChartPointData.series.push({
					data: []
				});
				console.log(this.pieChartPointData.series[0].data)
				for (let i = 0; i < tempCounts.length; i++) {
					let tempName = '';
					if (i == 0)
						tempName = _self.$t("thickShow.planAndUnimplementation");
					else if (i == 1)
						tempName = _self.$t("thickShow.planAndImplementation");
					else if (i == 2)
						tempName = _self.$t("thickShow.unplanAndImplementation");

					this.pieChartPointData.series[0].data.push({
						name: tempName,
						value: tempCounts[i]
					})
				}

				console.log(this.pieChartPointData)
			},

			genPlanPieData() {
				console.log("genPlanPieData")
				console.log(this.planImplementationData)
				let _self = this;
				let tempCounts = [0, 0, 0];
				this.planImplementationData.forEach(e => {
					let tempState = e.plan_mac_numb;
					tempCounts[tempState - 1]++;
				})

				this.pieChartData.series = [];
				this.pieChartData.series.push({
					data: []
				});
				console.log(this.pieChartData.series[0].data)
				for (let i = 0; i < tempCounts.length; i++) {
					let tempName = '';
					if (i == 0)
						tempName = _self.$t("thickShow.unimplemented");
					else if (i == 1)
						tempName = _self.$t("thickShow.ImplementationCompleted");
					else if (i == 2)
						tempName = _self.$t("thickShow.underImplementation");

					this.pieChartData.series[0].data.push({
						name: tempName,
						value: tempCounts[i]
					})
				}

				console.log(this.pieChartData)
			}
		}
	}
</script>

<style scoped lang="scss">
	.lay-root {
		background-color: #fff;
	}

	.table-head {
		font-size: 12rpx;
		font-weight: 400;
		color: #1F2329;
		background: #E9E9E9;
		// box-shadow: 0px 1px 0px 0px #E8E8E8;
		box-sizing: border-box;
		padding: 4rpx;		
		text-align: center;
	}

	.table-content {
		.table-item {
			width: 100%;
			align-items: center;
			box-sizing: border-box;
			border-bottom: 1upx solid #E9E9E9;

			.item-key {
				width: 50%;
				height: 100%;
				font-size: 12rpx;
				color: #333333;
				border-left: 1upx solid #E9E9E9;
				border-right: 1upx solid #E9E9E9;
				// border-bottom: 1upx solid #E9E9E9;
				box-sizing: border-box;
				padding: 4rpx 9rpx;
				background: #F8F8F9;
				box-sizing: border-box;
			}

			.item-value {
				// box-sizing: border-box;
				width: 50%;
				height: 100%;
				font-size: 9upx;
				color: #666666;
				box-sizing: border-box;
				padding: 0 7rpx;
				line-height: 19upx;
				border-right: 1upx solid #E9E9E9;
				// border-top: 1upx solid #E9E9E9;
				// border-bottom: 1upx solid #E9E9E9;
			}



		}
	}
	
	.table-show {
		width: 100%;
	}

	.pie-show {
		width: 100%;
	}

	.charts-box {
		box-sizing: border-box;
		width: 100%;
		height: 100%;
	}

	.second-lay {
		align-items: center;
		box-sizing: border-box;
		.item-value {
			text-align: right;
		}
	}
</style>
